<template>
  <div class="fillcontain">
    <el-tabs v-model="activeName" type="card">
			<el-tab-pane label="客户信息" name="first">
				<div class="customer-name">
					<el-radio v-model="appntOrInsure" label="1">投保人{{ appntInfo.clientName }}</el-radio>
  				<el-radio v-model="appntOrInsure" label="2">被保人{{ insuredInfo.clientName }}</el-radio>
				</div>
				<!-- 折叠面板 -->
				<div class="customer-tab-list" style="height: calc(100vh - 405px);">
					<el-collapse v-model="activeNames">
						<el-collapse-item title="基本信息" name="1">
							<el-form ref="form" :model="clientInfo" label-width="160px">
								<el-row>
                  <el-col :span="12" class="common-box">
										<el-form-item label="保单号">
											<el-input v-model="baseInfo.policy" placeholder="" disabled></el-input>
										</el-form-item>
									</el-col>
                  <el-col :span="12" class="common-box">
										<el-form-item label="受理号">
											<el-input v-model="baseInfo.accepted" placeholder="" disabled></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12" class="common-box">
										<el-form-item label="姓名">
											<el-input v-model="clientInfo.clientName" placeholder="请输入" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="年龄">
											<el-input v-model="clientInfo.age" placeholder="请输入" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="性别">
											<el-select v-model="clientInfo.sex" placeholder="请选择" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')">
												<el-option v-for="item in sexOptions" :label="item.dictValue" :value="item.id" :key="item.id"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="身份证号码">
											<el-input v-model="clientInfo.clientSecuityno" placeholder="请输入" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="出生日期">
											<el-date-picker
												v-model="clientInfo.birthday"
												type="date"
												value-format="yyyyMMdd"
												placeholder="选择日期"
                        :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')">
											</el-date-picker>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="婚姻状况">
											<el-select v-model="clientInfo.maritalStatus" placeholder="请选择" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')">
												<el-option v-for="(item, index) in maritalStatusOptions" :label="item.dictValue" :value="item.id" :key="index"></el-option>
												<!-- <el-option label="未婚" value="unmarried"></el-option> -->
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-collapse-item>
						<el-collapse-item title="生活方式" name="2">
							<el-form ref="form_style" :model="clientInfo"  label-width="160px">
								<el-row>
									<el-col :span="12" class="common-box">
										<el-form-item label="是否饮酒">
											<el-select v-model="clientInfo.isFewDrink" placeholder="请选择" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')">
												<el-option :label="item.dictValue" :value="item.id + ''" v-for="(item, index) in isFewDrinkOptions" :key="index"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="是否酗酒">
											<el-select v-model="clientInfo.isDrink" placeholder="请选择" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')">
												<el-option :label="item.dictValue" :value="item.id + ''" v-for="(item, index) in isDrinkOptions" :key="index"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="是否吸烟">
											<el-select v-model="clientInfo.isSmoke" placeholder="请选择" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')">
												<el-option :label="item.dictValue" :value="item.id + ''" v-for="(item, index) in isSmokeOptions" :key="index"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="日吸烟量">
											<el-input v-model="clientInfo.smokingAmount" placeholder="请输入" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')">
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-collapse-item>
						<el-collapse-item v-for="type in healthType" :title="type.label" :name="type.label" :key="type.label">
              <div v-for="(item,index) in clientInfo.healthMap[type.value]" :label="item.name" :key="index" style="margin: 0 10px 10px 0;width: 300px;">
                <el-form ref="itemForm" :model="item" label-width="0" style="display: flex;" v-if="statusFlag">
							    <el-tooltip class="item" effect="dark" :content="item.name" placement="top-end">
                    <div class="health-item">{{item.name}}</div>
                  </el-tooltip>
                  <el-col :span="6" style="width: 140px;">
                    <el-form-item label="" prop="status" :rules="{ required: true, message: '请选择治疗状况', trigger: 'change' }">
											<el-select v-model="item.status" placeholder="请选择" @change="(val)=>statusChange(val,item)">
                        <el-option v-for="cItem in healthDic" :label="cItem.dictValue" :value="cItem.id + ''" :key="cItem.id"></el-option>
                      </el-select>
										</el-form-item>
							    </el-col>
                </el-form>
              </div>
							<el-button icon="el-icon-plus" class="add-btn" @click="addCheckboxGroup(type.value)" :disabled="pageDisabled || (appntOrInsure == '1' && clientInfo.clientType == '3')"></el-button>
						</el-collapse-item>
					</el-collapse>
				</div>

			</el-tab-pane>

			<el-tab-pane label="体检信息" name="second">
				<!-- 折叠面板 -->
				<div class="customer-tab-list customer-tab-list-reset" style="height: calc(100vh - 360px);">
					<el-collapse v-model="activeNames_tijian">
						<el-collapse-item v-for="(item, index) in peInfo.rulePEs" :key="'pe'+item.parentId" :title="item.parentName" :name="item.parentId" >
							<template>
								<el-table :data="item.childPEVos" style="width: 100%">
									<el-table-column label="检查项目" width="180" align="center" show-overflow-tooltip>
										<template slot-scope="scope">
											<span>{{ scope.row.childName }}</span>
										</template>
									</el-table-column>
									<el-table-column label="测量结果" width="160" align="center">
										<template slot-scope="scope">
                      <el-form :model="scope.row" ref="tableForm" label-width="0" class="demo-ruleForm">
                        <el-form-item label="" prop="childResult" :rules="scope.row.threshold?.type && scope.row.threshold.type == '1' ? tableRules.childResult : []">
                          <el-input v-model="scope.row.childResult" :disabled="pageDisabled" @change="childResultChange(scope.row)"></el-input>
                        </el-form-item>
                      </el-form>
										</template>
									</el-table-column>
									<el-table-column label="单位"  width="160" align="center">
										<template slot-scope="scope">
											<el-select v-model="scope.row.unitId" placeholder="请选择" @change="unitChange($event, index, scope.$index)" :disabled="pageDisabled">
												<el-option v-for="unit in scope.row.units" :key="unit.unitId" :label="unit.unitName" :value="unit.unitId"></el-option>
											</el-select>
										</template>
									</el-table-column>
									<el-table-column label="异常描述" width="120" align="center">
										<template slot-scope="scope">
                      <div>
                        <span v-if="!scope.row.childResult || !scope.row.threshold || !scope.row.threshold.thresholdId"><!-- {{scope.row.isAbnormal = ''}} --></span>
                        <icon-svg style="font-size: 24px" iconClass="icon-tick" v-else-if="judgeFun(scope.row)"><!-- {{scope.row.isAbnormal = '0'}} --></icon-svg>
                        <icon-svg style="font-size: 18px" iconClass="icon-fork" v-else><!-- {{scope.row.isAbnormal = '1'}} --></icon-svg>
                      </div>
											<!-- <div
												v-if="scope.row.isAbnormal == 0">
												<i class="el-icon-success"
													style="color:#0ae619;margin-left: 20px"></i>
											</div> -->
										</template>
									</el-table-column>
									<el-table-column label="参考区间"  width="120" align="center" show-overflow-tooltip>
										<template slot-scope="scope">
											<span style="margin-left: 10px"
												v-if="scope.row.threshold?.thresholdId">
												{{ scope.row.threshold.type == '1' ? scope.row.threshold.thresholdStart + '-' + scope.row.threshold.thresholdEnd : scope.row.threshold.thresholdStart}}
											</span>
											<span style="margin-left: 10px" v-else></span>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</el-collapse-item>
						<el-collapse-item v-for="(item, index) in peInfo.riskPEs" :key="item.parentId" :title="item.parentName" :name="item.parentId" >
							<template>
								<el-table :data="item.riskChildPEVos" style="width: 100%">
									<!-- <el-table-column width="40">
										<template slot-scope="scope">
											<i class="el-icon-error" style="color:#fc0606;"></i>
										</template>
									</el-table-column> -->

									<el-table-column label="检查项目" width="120" show-overflow-tooltip>
										<!-- 自定义内容 -->
										<template slot-scope="scope">
                      <span class="round" v-if="scope.row.childValue"></span>
											<span>{{ scope.row.childName }}</span>
										</template>
									</el-table-column>

									<el-table-column label="信息采集" show-overflow-tooltip>
										<template slot-scope="scope">
											<span v-for="item in scope.row.propertys" :key="item.propertyId">
												{{ item.propertyValue | formatProperty(item.propertyName, item.isInput, item.values) }}
											</span>
										</template>
									</el-table-column>

									<el-table-column width="100">
										<template slot-scope="scope">
											<el-button icon="el-icon-more" size="mini" @click="open(index, scope.$index, scope.row.propertys,scope.row)"></el-button>
										</template>
									</el-table-column>

								</el-table>
							</template>
						</el-collapse-item>
					</el-collapse>
				</div>
			</el-tab-pane>

		</el-tabs>

    <!-- 添加新疾病 弹框 -->
		<el-dialog title="新增疾病" :visible.sync="newDiseasesMsg" width="700px" center>
			<!-- 返回结果 -->
			<div style="text-align: center; margin-top: 16px;position: relative;" class="mask-rest">
        <el-input
          class="search-input"
          placeholder="请输入搜索内容"
          prefix-icon="el-icon-search"
          @input="searchInput"
          v-model="searchText">
        </el-input>
				<el-transfer
					filterable
					style="text-align: left; display: inline-block"
					v-model="transferValue"
					:titles="['待选择列表', '已选择列表']"
          v-loading="loading"
          v-loadMore="loadMore"
					:data="transferData"
          @change="transferChange">
				</el-transfer>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="newDiseasesMsg = false">取 消</el-button>
				<el-button class="Defaultbutton" @click="saveDiseases">保存</el-button>
			</span>
		</el-dialog>
		<!-- 弹窗 信息采集 -->
		<el-dialog v-el-drag-dialog class="caiji" :visible.sync="coom" top="8vh" width="800px" center :title="childName + '-信息采集'" :close-on-click-modal="false">
			<!--需要弹出的内容部分-->
			<el-form label-width="120px">
				<el-row>
					<el-col v-for="(item, index) in riskPropertyInit" :key="index" :span="12">
						<el-form-item :label="item.propertyName">
							<el-input v-if="item.isInput=='1'" v-model="item.propertyValue" placeholder="请输入" :disabled="pageDisabled"></el-input>
							<el-select v-else v-model="item.propertyValue" :disabled="pageDisabled" clearable>
								<el-option v-for="option in item.values" :key="option.propertyValueId" :label="option.propertyValueName" :value="option.propertyValueId"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>	
        <el-row>
          <el-col :span="24">
            <el-form-item label="识别前结果">
              <el-input type="textarea" :rows="3" v-model="childValue" placeholder="" :disabled="true"></el-input>
						</el-form-item>
          </el-col>
        </el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="coom = false">取 消</el-button>
				<el-button class="Defaultbutton" @click="savePropertys" v-if="!pageDisabled">保存</el-button>
			</span>
		</el-dialog>
  </div>
</template>

<script>
import {
		getCodeDictProject,
	} from "@/api/taskCenter/enterWorkPool";
import {
	getHqnrInfo,
} from "@/api/taskCenter/manualEntry";

import constant from '@/utils/constant';
import {
  // 字典
  getNameDictProjectApi
} from "@/api/medicalLibrary/examProjectLibrary";

import elDragDialog from "@/directive/el-drag-dialog";
export default {
  directives: {
    loadMore: {
      // el 可以获取当前dom节点， binding一个对象(具体可以自行打印观察)，vnode第三个参数为虚拟节点
      bind (el, binding) {
        // 获取element，定义scroll
        const selectDom = el.querySelector('.el-transfer-panel__list');
        console.log(selectDom,'selectDom');
         // 添加滚动事件
	      selectDom.addEventListener('scroll', function () {
	    // scrollHeight所有数据占据面的一个高度,，scrollTop滚动条滚走的区域高度，clientHeight可视区域面积高度
              const height = selectDom.scrollHeight - selectDom.scrollTop - 5 <= selectDom.clientHeight;
          if (height) {
            binding.value();
          }
        });
      }
    },
    elDragDialog,
  },
	props: {
		appntInfo: {
			type: [Object]
		},
		insuredInfo: {
			type: [Object]
		},
		peInfo: {
			type: [Object]
		},
    baseInfo: {
			type: Object,
      default: function (){
        return {}
      }
		},
    pageDisabled: {
      type: Boolean,
      default: false
    }
	},
	created() {
		// 查询字典
		getCodeDictProject('sex').then( res => {
			this.sexOptions = res.data;
		});
		getCodeDictProject('maritalStatus').then( res => {
			this.maritalStatusOptions = res.data;
		});
    getCodeDictProject('cureStatus').then( res => {
			this.healthDic = res.data;
		});
    getNameDictProjectApi({name: '是否饮酒'}).then(res => {
			this.isFewDrinkOptions = res.data
		})
    getNameDictProjectApi({name: '是否酗酒'}).then(res => {
			this.isDrinkOptions = res.data
		})
    getNameDictProjectApi({name: '是否吸烟'}).then(res => {
			this.isSmokeOptions = res.data
		})
    this.getHqnrInfoList()
	},
  activated(){
    this.activeNames = ['1','2','既往史','家族史']
  },
	watch: {
    peInfo: {
      handler(newVal){
        let manualInfo = {
          peInfo:  this.peInfo,
          appntInfo: this.appntInfo,
          insuredInfo: this.insuredInfo,
        }
        this.appntOrInsure = this.peInfo.clientType == '1' ? '1' : '2'
        sessionStorage.setItem('manualInfo',JSON.stringify(manualInfo))
      },
      deep: true,
      immediate: true
    },
    appntInfo: {
      handler(newVal){
         let manualInfo = {
          peInfo:  this.peInfo,
          appntInfo: this.appntInfo,
          insuredInfo: this.insuredInfo,
        }
        sessionStorage.setItem('manualInfo',JSON.stringify(manualInfo))
      },
      deep: true,
      immediate: true
    },
    insuredInfo: {
      handler(newVal){
         let manualInfo = {
          peInfo:  this.peInfo,
          appntInfo: this.appntInfo,
          insuredInfo: this.insuredInfo,
        }
        sessionStorage.setItem('manualInfo',JSON.stringify(manualInfo))
      },
      deep: true,
      immediate: true
    }
  },
	computed: {
		clientInfo() {
			if(this.appntOrInsure === '1'){ // 默认投保人
				return this.appntInfo;
			} else{
				return this.insuredInfo;
			}
		}
	},
	filters: {
		formatProperty(val, str, isInput, arr) {
			if(val) {
				if(isInput === '1') {
					return `${str}:${val};`;
				}
				let index = arr.findIndex(item => val === item.propertyValueId);
				if(index > -1 && (arr[index].propertyValueName)){
					let res = arr[index].propertyValueName;
					return `${str}:${res};`;
				}
			}
			
		}
	},
  data(){
    var childResultVal = (rule, value, callback) => {
      let reg = /^(-)?[0-9]+([.][0-9]{0,})?$/
			if(value && !value.match(reg)){
        return callback(new Error('请输入数字类型的值'));
      }
			callback();
		};
    return {
			sexOptions: [],
			maritalStatusOptions: [],
      healthDic: [],
			isFewDrinkOptions: [],
			isDrinkOptions: [],
			isSmokeOptions: [],
			healthType: constant.healthType,
      activeName: 'first',
			appntOrInsure: '2',
			newDiseasesMsg: false,
			// searchCondition: '',
			activeNames: ['1','2','既往史','家族史'],
			activeNames_tijian: [],
			isShow: false,
			coom: false,
			transferValue: [],
			transferData: [],
			typeValue: '',  // 记录正在给操作的客户信息
			riskPropertyInit: [
				{
					"propertyId": "",
					"propertyName": "",
					"isInput": "0",
					"propertyValueName": '',
					"values": [
						{
							"propertyValueId": "",
							"propertyValueName": ""
						},
					]
				},
			],
			propertyIndex:[ -1, -1],
      childName: '',
      childValue: '',
      tableRules: {
        childResult: [{ validator: childResultVal, trigger: 'blur' }]
      },
      
      currentList: [],  //穿梭框当前选中的疾病
      searchText: '',
      // 分页
      page: {
        pageNum: 1,
        pageSize: 100,
        parameter: ''
      },
      loading: false,
      moreFlag: true,
      statusFlag: true
    }
  },
  methods: {
    getHqnrInfoList(){
      this.loading = true
      // 查询所有疾病
		  getHqnrInfo({
        pageNum: this.page.pageNum,
	      pageSize: this.page.pageSize,
	      parameter: this.page.parameter
      }).then(res => {
        this.loading = false
        this.moreFlag = true
		  	if(this.page.pageNum == 1) this.transferData = []
        if(!res.data.list || !res.data.list.length) this.moreFlag = false
		  	res.data.list.forEach(item => {
          let keyList = this.transferData.map(mItem => mItem.key)
          if(keyList.indexOf(item.childCode) > -1) return
		  		let obj = {
		  			key: item.childCode,
		  			label: item.childName
		  		}
		  		this.transferData.push(obj);
		  	});
        let keys = this.transferData.map(mItem => mItem.key)
        this.currentList.forEach(item=>{
          if(keys.indexOf(item.key) == -1) this.transferData.push({
            key: item.key,
		  			label: item.label
          })
        })
        const map = new Map();
        const newArr = this.transferData.filter(v => !map.has(v.key) && map.set(v.key, 1));
        this.transferData = newArr
		  })
    },
    loadMore(){
      if(!this.moreFlag) return
      this.page.pageNum += 1
      this.getHqnrInfoList()
    },
    // 穿梭框数据改变是触发
    transferChange(value, direction, movedKeys){
      this.currentList = value.map(item=>{
        return {
          key: item,
          label: this.transferData.filter(fItem => fItem.key == item)[0].label
        }
      })
    },
    // 搜索框改变时触发
    searchInput(value){
      this.page.pageNum = 1
	    this.page.parameter = value
      this.getHqnrInfoList()
    },
    // 校验表格测量结果的数据
    childResultValidate(){
      let flag = false
      try {
        this.$refs.tableForm.forEach(item=>{
          item.validate((valid)=>{
            if(!valid) {
              flag = true
              throw new Error('')
            }
          })
        })
      } catch (error) {
        setTimeout(()=>{
          let errEl = document.querySelector('.el-form-item__error')
          let text = ''
          if(errEl) text = errEl.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[0].innerText
          this.$message.warning(text+'分类下存在测量结果检验不通过')
          let targetTop = errEl.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
          document.querySelector('.customer-tab-list-reset').scrollTop = targetTop.offsetTop
        },500)
      }
      return flag
    },
    // 判断显示对勾还是叉
    judgeFun(row){
      let flag = false
      // 按区间
      if(row.threshold.type == '1'){
        if(row.threshold.thresholdStart == '-∞' && Number(row.threshold.thresholdEnd) >= Number(row.childResult)) flag = true
        else if(Number(row.threshold.thresholdStart) <= Number(row.childResult) && row.threshold.thresholdEnd == '+∞') flag = true
        else if(row.threshold.thresholdStart == '-∞' && row.threshold.thresholdEnd == '+∞' && !isNaN(Number(row.childResult))) flag = true
        else if(Number(row.threshold.thresholdStart) <= Number(row.childResult) && Number(row.threshold.thresholdEnd)>= Number(row.childResult)) flag = true
      }else{
        // 按内容
        if(row.threshold.thresholdStart == row.childResult) flag = true
      }
      return flag
    },
    // 处理体检信息各项默认展开和收起
    expanHandle(){
      this.activeNames_tijian = []
      if(this.peInfo.rulePEs && this.peInfo.rulePEs.length){
        this.peInfo.rulePEs.forEach(item=>{
          let filterArr = []
          if(item.childPEVos && item.childPEVos.length) filterArr = item.childPEVos.filter(fItem=>fItem.childResult)
          if(filterArr.length) this.activeNames_tijian.push(item.parentId)
        })
      }

      if(this.peInfo.riskPEs && this.peInfo.riskPEs.length){
        this.peInfo.riskPEs.forEach(item=>{
          if(item.riskChildPEVos && item.riskChildPEVos.length) {
            try {
              item.riskChildPEVos.forEach(rItem=>{
                if(rItem.propertys && rItem.propertys.length) {
                  if(rItem.propertys.filter(fItem=>fItem.propertyValue).length) throw new Error()
                }
              })
            } catch (error) {
              this.activeNames_tijian.push(item.parentId)
            }
          }
        })
      }
    },
		// 点击出现弹窗
		open(i, j , propertys, row) {
			this.propertyIndex = [i, j];
			this.riskPropertyInit = constant.deepClone(propertys);
			this.isShow == !this.isShow;
			this.coom = true;
      this.childName = row.childName
      this.childValue = row.childValue
		},
		savePropertys() {
			this.peInfo.riskPEs[this.propertyIndex[0]].riskChildPEVos[this.propertyIndex[1]].propertys = this.riskPropertyInit;
			this.coom = false;
		},
    childResultChange(row){
      if(!row.childResult || !row.threshold || !row.threshold.thresholdId) this.$set(row,'isAbnormal','')
      else if(this.judgeFun(row)) this.$set(row,'isAbnormal','0')
      // else if(Number(row.threshold.thresholdStart) <= Number(row.childResult) && Number(row.threshold.thresholdEnd )>= Number(row.childResult)) this.$set(row,'isAbnormal','0')
      else this.$set(row,'isAbnormal','1')
    },
		unitChange(val, i, j) {
			console.log(val, i, j)
			let unitId =val;
			let obj = this.peInfo.rulePEs[i].childPEVos[j];
			obj.units.forEach(item => {
				if(item.unitId === unitId) {
					obj.unitName = item.unitName;
				}
			})
		},
    statusChange(val,item){
      this.statusFlag = false 
      this.$forceUpdate()
      this.$nextTick(()=>{
        this.statusFlag = true
      })
      this.saveDiseases()
    },
		addCheckboxGroup(i) {
			this.typeValue = i;
			this.transferValue = [];
      this.currentList = []
      this.searchText = ''
			let that = this;
			this.clientInfo.healthMap[i]?.forEach(item => {
				that.transferValue.push(item.diseaseId);
        that.currentList.push({
          key: item.diseaseId,
          label: item.name
        })
			})
      this.page = {
        pageNum: 1,
        pageSize: 100,
        parameter: ''
      }
      this.getHqnrInfoList()
			this.newDiseasesMsg = true;
		},
		saveDiseases() {
			let that = this;
      let oldArr = this.clientInfo.healthMap[that.typeValue] && this.clientInfo.healthMap[that.typeValue].length ?  JSON.parse(JSON.stringify(this.clientInfo.healthMap[that.typeValue])) : []
			this.clientInfo.healthMap[that.typeValue] = [];
			that.transferValue.forEach(trans => {
				let index = that.transferData.findIndex(item => trans === item.key)
				let name = that.transferData[index].label;
				let obj = {
					type: that.typeValue,
					diseaseId: trans,
					name,
				}
        let filterArr = oldArr.filter(fItem=>fItem.diseaseId == trans)
        this.$set(obj,'status',filterArr.length ? filterArr[0].status : '')
				this.clientInfo.healthMap[that.typeValue].push(obj);
			})
      this.$emit('updateManualInfo',this.clientInfo.healthMap,this.clientInfo.clientType,this.appntOrInsure)
			that.newDiseasesMsg = false;
		},
    validateFlag(){
      let flag = true
      if(this.$refs.itemForm){
        this.$refs.itemForm.forEach(item=>{
          item.validate((valid) => {
            if(!valid) flag = false
          })
        })
      }
      return flag
    }, 
  }
}
</script>

<style lang="less" scoped>

	@commonPadding: 20px;
	@commonBorder: 1px solid #e3dddd;

	.fillcontain {
		padding: 0;
		.customer-tab-list {
			min-height: 510px;
			overflow-y: scroll;
		}
    .customer-tab-list-reset{
      min-height: 560px;
    }
		.customer-name {
			background-color: #fff;
			height: 50px;
			line-height: 50px;
			border-radius: 2px;
			padding-left: 20px;
		}
		.add-btn {
			display: inline-block;
			padding: 4px 10px !important;
      height: 30px;
			// margin-bottom: 10px;
		}
	}
  .round{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-radius: 5px;
    background: #f56c6c;
  }
  .health-item{
    color: #606266;
    margin-right: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100% - 140px);
    text-align: right;
  }
  .search-input{
    position: absolute;
    z-index: 10;
    left: 64px;
    top: 55px;
    width: 170px;
  }
  /deep/ .search-input input{
    border-radius: 16px;
  }

  /deep/ .el-checkbox-group {
		display: inline-block;
		margin-right: 80px;
	}
/* 	/deep/ .el-button--mini, .el-button--mini.is-round {
		padding: 0px 8px;
	} */

	/deep/ .el-tabs--card .el-tabs__content {
		padding-top: 10px !important;
		padding-right: 0 !important;
	}

	/deep/ .el-collapse-item__content {
    display: flex;
    flex-wrap: wrap;
		padding: 20px !important;
		// padding-right: 20px !important;
		// padding-left: 20px;
		form {
			margin-bottom: -10px;
		}
	}
	/deep/ .el-collapse-item__wrap {
		margin-top: 1px;
	}
	/deep/ .el-collapse-item__header {
		// width: 739px;
		background-color: #fff !important;
		margin-top: 10px;
		position: relative;
		font-weight: 700;
	}
  /deep/ .cell{
    padding-bottom: 7px;
    padding-top: 7px;
  }
	/* /deep/ .el-dialog__body .el-input__inner {
    background: #fff !important;
	} */

  /deep/ .mask-rest .el-loading-mask{
    background-color: rgba(255,255,255,.4) !important;
  }
  /deep/ .caiji .el-dialog__body{
    max-height: 60vh;
    min-height: 300px;
    overflow: auto;
  }
  /deep/ .el-transfer-panel__body .el-checkbox{
    user-select: auto !important;
  }
</style>